<template>
  <div>
    <header class="app-header">面试宝典</header>
    <div class="core-container">
      <div class="scroll-wrapper" ref="scroll">
        <div>
          <div class="pulldown-wrapper">
            <div v-show="beforePullDown">
              <span>下拉刷新</span>
            </div>
            <div v-show="!beforePullDown">
              <div v-show="isPullingDown">
                <span>加载中...</span>
              </div>
              <div v-show="!isPullingDown">
                <span>刷新成功</span>
              </div>
            </div>
          </div>
          <!--  -->
          <div class="scroll-content">
            <div
              class="scroll-item"
              :class="{ study: studyIds.includes(item.id) }"
              v-for="(item, index) in list"
              :key="index"
              @click="clickHandler(item)"
            >
              {{ item.title }}
            </div>
          </div>
          <!--  -->
          <div class="pullup-tips">
            <div v-if="!isPullUpLoad" class="before-trigger">
              <span class="pullup-txt">上拉加载更多</span>
            </div>
            <div v-else class="after-trigger">
              <span class="pullup-txt">加载中...</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->
    <!-- <Detail v-if="showDetail" :item="tmpItem" /> -->
  </div>
</template>

<script>
// import BScroll from "@better-scroll/core";
import BScroll from "better-scroll";
// import PullDown from "@better-scroll/pull-down";
// BScroll.use(PullDown);

// import Detail from "./detail";

export default {
  name: "msbd",
  data() {
    return {
      beforePullDown: true,
      isPullingDown: false,
      isPullUpLoad: false,
      y: sessionStorage.getItem("y") * 1 || 0,
      // showDetail: false,
      // tmpItem: {},
    };
  },
  async created() {
    await this.$store.dispatch("msbd/getList");
    await this.$store.dispatch("msbd/getStudyBdidByUid");
    this.bs.refresh();
  },
  mounted() {
    this.init();
    console.log("mounted...msbd");
  },
  destroyed() {
    // console.log(this.y);
    sessionStorage.setItem("y", this.y);
  },
  beforeDestroy() {
    this.bs.destroy();
  },
  methods: {
    init() {
      this.bs = new BScroll(this.$refs.scroll, {
        probeType: 1,
        click: true,
        scrollY: true,
        bounceTime: 800,
        pullDownRefresh: {
          threshold: 70,
          stop: 56,
        },
        pullUpLoad: true,
        startY: this.y,
      });
      this.bs.on("scroll", ({ y }) => {
        // console.log("scrolling-" + y);
      });
      this.bs.on("scrollEnd", ({ y }) => {
        console.log("scrollingEnd" + y);
        this.y = y;
      });
      this.bs.on("pullingDown", async () => {
        this.beforePullDown = false;
        this.isPullingDown = true;
        this.$store.commit("msbd/SET_CURRENT_PAGE", 0);
        this.$store.commit("msbd/RESET_LIST");
        await this.$store.dispatch("msbd/getList");
        this.isPullingDown = false;
        this.bs.refresh();
        setTimeout(() => {
          this.bs.finishPullDown();
          this.beforePullDown = true;
        }, 500);
      });
      this.bs.on("pullingUp", async () => {
        this.isPullUpLoad = true;
        this.$store.commit("msbd/SET_CURRENT_PAGE", this.currentPage + 1);
        await this.$store.dispatch("msbd/getList");
        this.bs.finishPullUp();
        this.bs.refresh();
        this.isPullUpLoad = false;
      });
    },
    clickHandler(item) {
      // console.log(item);
      this.$router.push("/detail/" + item.id);
      // this.$router.push({ name: "detail", params: { item } });
      // this.tmpItem = item;
      // this.showDetail = true;
    },
  },
  computed: {
    list() {
      return this.$store.state.msbd.list;
    },
    currentPage() {
      return this.$store.state.msbd.currentPage;
    },
    studyIds() {
      return this.$store.state.msbd.studyIds;
    },
  },
  components: {
    // Detail,
  },
};
</script>

<style scoped>
.core-container .scroll-wrapper {
  height: calc(100vh - 121px);
  overflow: hidden;
}

.core-container .scroll-wrapper .scroll-item {
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  text-indent: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.core-container .scroll-wrapper .scroll-item.study {
  color: #999;
}

.core-container .scroll-wrapper .scroll-item:nth-child(2n) {
  background-color: #f3f5f7;
}
.core-container .scroll-wrapper .scroll-item:nth-child(2n + 1) {
  background-color: #d4dadc;
}

.pulldown-wrapper {
  position: absolute;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  transform: translateY(-100%) translateZ(0);
  text-align: center;
  color: #999;
}

.pullup-tips {
  padding: 20px;
  text-align: center;
  color: #999;
}
</style>